define(["jquery"],function(){
	
	return{
		//定义当前要显示的banner图片
		currentIndex : 0,
		//获取banner 父级元素
		$bannerBox : $(".banner_box"),
		//定义一个定时器
		timer : null,
		//通过ajax请求的数据,初始化banner函数
		init : function(res){
			//初始化banner图
			var srcArr = res.bannerSrc;
			var length = srcArr.length;
			for(var i=srcArr.length-1; i>=0; i--){
				
				//创建轮播图item
				var $bannerItem = $('<li class="banner_item"><a href="javascript:;"></a></li>');
				$bannerItem.css({
					"background":"url("+srcArr[i]+") no-repeat center"
				});
				//创建轮播图对应显示按钮
				var $bannerButtonItem = $('<li class="bannerButtonItem"></li>');
				$(".banner_button").append($bannerButtonItem);
				this.$bannerBox.append($bannerItem);
			}
			
			//让第一张图片显示
			$(".banner_item").eq(this.currentIndex).show();
			$(".bannerButtonItem").eq(this.currentIndex).css({background:"#FFF"}).siblings().css({background:"#000"});
			this.bannerMove(length);
			
			//设置banner 滑入滑出显示左右点击按钮
			$(".banner").on("mouseenter",function(){
				clearInterval(this.timer);
				$(".banner>span").show();
			}.bind(this)).on("mouseleave",function(){
				this.bannerMove(length);
				$(".banner>span").hide();
			}.bind(this))
			
			//给左右点击按钮添加点击切换图片事件
			var that = this;
			$(".banner>span").on("click",function(){
				
				if($(this).index(".banner>span") == 0){
					if(that.currentIndex > 0){
						that.currentIndex-- ;
					}else{
						that.currentIndex = length-1;
					}
				}else{
					if(that.currentIndex < length-1){
						that.currentIndex++ ;
					}else{
						that.currentIndex = 0;
					}
				}
				console.log(that.currentIndex);
				that.changeImage();
			});
			//给banner dot 添加点击事件
			$(".bannerButtonItem").on("click",function(){
				that.currentIndex = $(this).index();
				that.changeImage();
			})
			
			
			//创建bannerNav区域
			this.bannerNavShow();
			
			
			
		},
		//banner 开始自动轮播
		bannerMove : function(length){
			clearInterval(this.timer);
			this.timer = setInterval(function(){
				if(this.currentIndex < length-1){
					this.currentIndex++;
				}else{
					this.currentIndex = 0;
				}
				this.changeImage();
			}.bind(this),3000);
			
			
		},
		changeImage : function(){
			var $bannerItems = $(".banner_item");
			$bannerItems.eq(this.currentIndex).show().siblings().hide();
			$(".bannerButtonItem").eq(this.currentIndex).css({background:"#FFF"}).siblings().css({background:"#000"});
		},
		
		bannerNavShow : function(){

			var $bannerNav = $(".banner_navi");
			$.ajax({
				url:"data_json/data_banner_navi.json",
				type:"get",
				success:function(res){
					for(var i=0;i<res.length;i++){
						
						var html="";
						var $li = $('<li class="list_con_container"></li>');
						if(res[i].list.length != 0){
							html = `<a href="javascriptL:;" class="list_con_text">${res[i].name}</a>
									<div class="list_con_box">
										<div class="content_left">
											${
												showItem(res[i].list)
											}
										</div>
										
										<div class="content_right">
											<a href="javascript:;"> <img src=""/></a>
											<a href="javascript:;"> <img src=""/></a>
										</div>
									</div>`
							//设置$li的
						}else{
							html = `<a href="javascriptL:;" class="list_con_text">${res[i].name}</a>`
						}
						$li.html(html);
						$bannerNav.append($li);
					}
					
					//给bannerNavItem 添加onmouseover事件
					$(".list_con_container").on("mouseenter",function(){
						$(this).find(".list_con_box").show();
					}).on("mouseleave",function(){
						$(this).find(".list_con_box").hide();
					});
					
					//给img添加src
					$.each($(".content_right"),function(index,item){
						if(res[index].list.length != 0){
							$(item).find("img").eq(0).attr("src",res[index].src[0]);
							$(item).find("img").eq(1).attr("src",res[index].src[1]);
						}
					});
					
					
					//success内部函数,用于字符串模板的调用
					function showItem(res){
						
							var html = "";
							for(var i=0;i<res.length;i++){
								html += `<div>
											<p>
												${res[i].title}
											</p>
											<ul>
												${showLi(res[i].content)}
											</ul>
										</div>`
								
							};
							function showLi(res){
								var txt = "";
								for(var j=0;j<res.length;j++){
									txt += `<li><a href="">${res[j]}</a></li>`
								}
								return txt;
							};
							return html;
						
					}
				}
			});
			
			
			
			
		}
		
		
		
	}
	
	
	
})